<script setup>
import ResultTable from '@/components/ResultTable.vue'
import { ref } from 'vue'
const props = defineProps({
  // 表格数据
  dataSource: {
    type: Array,
    default: () => [],
  },
  // 分页总数
  total: {
    type: Number,
    default: 0,
  },
  // 表格加载状态
  loading: {
    type: Boolean,
    default: false,
  },
  page: {
    type: Number,
    default: 1,
  },
  pageSize: {
    type: Number,
    default: 10,
  },
})

const emit = defineEmits(['change', 'update:page', 'update:pageSize', 'edit'])

// 表格列数据
const columns = ref([
  {
    title: '序号',
    key: 'index',
    align: 'center',
    // 🚨注意：表格序号自动递增，分页后也不影响
    customRender: ({ index }) => (props.page - 1) * props.pageSize + index + 1,
  },
  {
    title: '快递员账号',
    key: 'account',
    align: 'center',
    dataIndex: 'account',
  },
  {
    title: '快递员姓名',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
    width: 200,
  },
  {
    title: '快递员手机号',
    dataIndex: 'mobile',
    key: 'mobile',
    align: 'center',
    width: 200,
  },
  {
    title: '所属机构',
    dataIndex: ['agency', 'name'],
    align: 'center',
    width: 200,
  },
  // 工作状态
  {
    title: '工作状态',
    dataIndex: 'workStatus',
    align: 'center',
    key: 'workStatus',
    width: 200,
  },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    align: 'center',
    width: 200,
  },
])

// 表格数据
const onChange = ({ current, pageSize }) => {
  // 更新页码和页容量
  emit('update:page', current)
  emit('update:pageSize', pageSize)
  // 触发父组件的 change 事件
  emit('change', { page: current, pageSize: pageSize })
}
</script>

<template>
  <ResultTable
    :columns="columns"
    :data-source="dataSource"
    :page="page"
    :page-size="pageSize"
    :loading="loading"
    :total="total"
    @change="onChange"
  >
    <!-- 具名作用域插槽 -->
    <template #bodyCell="{ column, text }">
      <!-- 车辆是否可用 -->
      <template v-if="column.dataIndex === 'workStatus'">
        <div class="table-column-status" :class="text ? 'can-use' : 'stop-use'">
          {{ text ? '上班' : '休息' }}
        </div>
      </template>
      <!-- 操作 -->
      <template v-if="column.key === 'operation'">
        <a-button
          @click="
            $router.push(
              `/employee/MapContent?agencyName=${text.agency.name}&id=${text.userId}&name=${text.name}`,
            )
          "
          type="link"
          >作业范围分配</a-button
        >
        <!-- <a-button @click="drawerRef.onOpenDrawer(text.id)" type="link">{{ text }}</a-button> -->
      </template>
    </template>
  </ResultTable>
</template>
